// src/routes/index.tsx
import React, { lazy, Suspense, FC } from 'react'
import { useRoutes, Navigate } from 'react-router-dom'
import {
  HomeOutlined,
  SettingOutlined,
  UnorderedListOutlined,
  ShoppingOutlined,
} from '@ant-design/icons'
import type { SRoutes } from './types'

import {
  Layout,
  EmptyLayout,
  // CompLayout
} from '../layouts'
import Loading from '@comps/Loading'

import Translation from '@comps/Translation'
const AddOrUpdateHospital = lazy(
  () => import('@pages/hospital/hospitalSet/components/AddOrUpdateHospital')
)
const HoseitalSet = lazy(() => import('@pages/hospital/hospitalSet'))
const HoseitalShow = lazy(
  () => import('@/pages/hospital/hospitalList/components/hospitalShow')
)
const HoseitalList = lazy(() => import('@/pages/hospital/hospitalList'))
const Trademark = lazy(() => import('@/pages/Product/Trademark'))
const Attr = lazy(() => import('@/pages/Product/Attr'))
const Spu = lazy(() => import('@/pages/Product/Spu/index'))
const Login = lazy(() => import('@pages/login'))
const Dashboard = lazy(() => import('@pages/dashboard'))
const NotFound = lazy(() => import('@pages/404'))

const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  )
}

const routes: SRoutes = [
  {
    path: '/',
    element: <EmptyLayout />,
    children: [
      {
        path: 'login',
        element: load(Login),
      },
    ],
  },

  {
    path: '/syt',
    element: <Layout />,
    children: [
      {
        path: '/syt/dashboard',
        meta: {
          icon: <HomeOutlined />,
          title: <Translation>route:dashboard</Translation>,
        },
        element: load(Dashboard),
      },

      {
        path: '/syt/hospital',
        meta: {
          icon: <HomeOutlined />,
          title: <Translation>医院管理</Translation>,
        },
        children: [
          {
            path: '/syt/hospital/hospitalList',
            meta: {
              icon: <UnorderedListOutlined />,
              title: <Translation>医院列表</Translation>,
            },
            element: load(HoseitalList),
          },
          {
            path: '/syt/hospital/hospitalSet',
            meta: {
              icon: <SettingOutlined />,
              title: <Translation>医院设置</Translation>,
            },
            element: load(HoseitalSet),
          },
          {
            path: '/syt/hospital/hospitalSet/add',
            meta: {
              icon: <SettingOutlined />,
              title: <Translation>添加医院</Translation>,
            },
            element: load(AddOrUpdateHospital),
            hidden: true,
          },
          {
            path: '/syt/hospital/hospitalSet/setid/:id',
            meta: {
              icon: <SettingOutlined />,
              title: <Translation>修改医院</Translation>,
            },
            element: load(AddOrUpdateHospital),
            hidden: true,
          },
          {
            path: '/syt/hospital/hospitalList/hospitalShow/:id',
            meta: {
              icon: <SettingOutlined />,
              title: <Translation>详细信息</Translation>,
            },
            element: load(HoseitalShow),
            hidden: true,
          },
        ],
      },
      {
        path: '/syt/product',
        meta: { icon: <ShoppingOutlined />, title: '商品管理' },
        children: [
          {
            path: '/syt/product/trademark',
            meta: { title: '品牌管理' },
            element: load(Trademark),
          },
          {
            path: '/syt/product/attr',
            meta: { title: '平台属性管理' },
            element: load(Attr),
          },
          {
            path: '/syt/product/spu',
            meta: { title: 'SPU管理' },
            element: load(Spu),
          },
        ],
      },
    ],
  },

  {
    path: '/404',
    element: load(NotFound),
  },
  {
    path: '*',
    element: <Navigate to="/404" />,
  },
]

/* 
自定义hook: 注册应用的所有路由
*/
export const useAppRoutes = () => {
  return useRoutes(routes)
}

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => route.path === '/syt')
  return routes[currentIndex].children as SRoutes
}

export default routes
